<template>
	<div class="header">
		<div class="logo">
			<img src="../../asset/img/logo.png" alt="易普快猎招聘共享中心" /><span
				>易普快猎招聘共享中心</span
			>
		</div>
		<div class="userInfo">
			<div class="user">
				<el-avatar :size="32"></el-avatar>
				<span>你好吗</span>
			</div>
			<div class="notific">
				<i class="iconfont icon-notice"></i>
				<el-badge :value="200" :max="99" class="item">
					<span>消息</span>
				</el-badge>
			</div>
			<div class="logout" @click="logout">
				<i class="iconfont icon-logout"></i>
				<span>退出</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'

const logout = () => {
	ElMessageBox.confirm('确定退出?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		ElMessage({
			type: 'success',
			message: '退出成功!'
		})
	})
}
</script>

<style scoped lang="scss">
.header {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	.logo {
		display: flex;
		align-items: center;
		padding-left: 20px;
		span {
			font-size: 20px;
			margin-left: 16px;
			color: #2e303d;
		}
	}
	.userInfo {
		display: flex;
		align-items: center;
		div {
			display: flex;
			align-items: center;
			margin-right: 25px;
			cursor: pointer;
			.iconfont {
				margin-right: 10px;
				font-size: 20px;
				color: #767a8c;
			}
			&:hover {
				opacity: 0.8;
			}
		}
		.user {
			span {
				margin-left: 10px;
			}
		}
	}
}
</style>
